<template>
  <div class="carousel-wrap" id="carousel">
    <transition-group tag="ul" class="slide-ul" name="list">
      <li v-for="(list, index) of slideList" v-show="index===currentIndex" :key="list.id" @mouseenter="stop" @mouseleave="go">
        <a href="list.clickUrl">
          <img :src="list.image" alt="list.desc">
        </a>
      </li>
    </transition-group>
    <div class="carousel-item">
      <span v-for="(item, index) in slideList.length" :class="{'active':index===currentIndex}" :key="index" @mouseover="change(index)"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'slide',
  data () {
    return {
      slideList: [
        {
          'id': 1,
          'clickUrl': '#',
          'desc': '第一张图',
          'image': 'https://resource.smartisan.com/resource/P/PC2019011701.png?x-oss-process=image/format,jpg/quality,Q_100'
        },
        {
          'id': 2,
          'clickUrl': '#',
          'desc': '第二张图',
          'image': 'https://resource.smartisan.com/resource/t/tidiaozhibo1.png?x-oss-process=image/format,jpg/quality,Q_100'
        }
      ],
      currentIndex: 0,
      timer: ''
    }
  },
  methods: {
    go () {
      this.timer = setInterval(() => {
        this.autoPlay()
      }, 2000)
    },
    stop () {
      clearInterval(this.timer)
      this.timer = null
    },
    change (index) {
      this.currentIndex = index
    },
    autoPlay () {
      this.currentIndex++
      if (this.currentIndex > this.slideList.length - 1) {
        this.currentIndex = 0
      }
    }
  },
  created () {
    this.$nextTick(() => {
      this.timer = setInterval(() => {
        this.autoPlay()
      }, 4000)
    })
  }
}
</script>

<style scoped>
.carousel-wrap {
  height: 453px;
  width:100%;
  overflow: hidden;
  background: #fff;
  border-radius: 10px;
  position: relative;
}
.slide-ul{
  position: relative;
  width:100%;
  height:100%;
}
.slide-ul li{
  position: absolute;
  width:100%;
  height:100%;
}
img{
  display: block;
  width:100%;
  height:100%;
}
.carousel-item{
  position: absolute;
  z-index: 10;
  bottom: 30px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  font-size: 0;
}
.carousel-item span{
  display: inline-block;
  height: 6px;
  width: 30px;
  margin: 0 3px;
  background: #b2b2b2;
}
.carousel-item span.active{
  background: #ffbe40;
}
</style>
